<template>
  <div class="person">
    <h2>当前的求和是: {{ sum }}</h2>
    <button @click="add">点我sum + 1</button>
  </div>

</template>

<script setup lang="ts" name = 'FindYou'> // 相当于写了setup() {}
import {ref, onBeforeMount, onMounted, onBeforeUpdate ,onUpdated, onBeforeUnmount, onUnmounted} from 'vue'

//------------------数据-----------------------
let sum = ref(0)



//------------------方法-----------------------
function add() {
  sum.value += 1
}


// -----------------创建----------------------- 直接用setup替代掉了


//-----------------挂载------------------------
onBeforeMount(()=>{
  console.log('子--挂载前');
}) // 挂载前
onMounted(()=>{
  console.log('子--挂载完毕')
})


//------------------更新--------------------
onBeforeUpdate(()=>{
  console.log('更新前');
  
})

onUpdated(()=>{
  console.log('更新后');
  
})

// -----------------卸载-------------------------
onBeforeUnmount(()=>{
  console.log('卸载前');
  
})

onUnmounted(()=>{
  console.log('卸载完毕');
  
})

</script>

<style scoped >
  /*  加上这个scoped 只能在本vue有效  无脑加*/
  .person {
    background-color: pink;
  }

  button {
    margin: 0 5px;
  }
</style>